<template>
     <div>
        <div>
            <el-button type="danger" size="small" :disabled="multipleSelection.length == 0"  
                @click="deleteMany">批量删除</el-button>
               <el-input size="small" v-model="jl.name" style="width: 200px;margin-left: 80px;"
                prefix-icon="el-icon-plus"    placeholder="添加职称"></el-input>
                       <el-select v-model="jl.titleLevel" placeholder="职称等级" size="small"
                style="margin-left: 6px;margin-right: 6px">
                               <el-option v-for="item in titleLevels" :key="item" :label="item"
                    :value="item"></el-option>
                       </el-select>
                       <el-button type="primary" icon="el-icon-plus" size="small" @click="addJobLevel">添加</el-button>
                   
        </div>
         <div style="margin-top: 10px">
                       <el-table :data="jls" border stripe size="small" @selection-change="handleSelectionChange"
                style="width: 80%">
                               <el-table-column type="selection" width="50" align="center">
                                   </el-table-column>
                               <el-table-column prop="id" label="编号" width="50" align="center">
                                   </el-table-column>
                               <el-table-column  prop="name" label="职称名称" width="120" align="center">
                                   </el-table-column>
                               <el-table-column prop="titleLevel"  label="职称级别"  width="120"
                    align="center"></el-table-column>
                               <el-table-column  prop="createDate"  label="创建时间"    width="130" align="center">
                                   </el-table-column>
                               <el-table-column   prop="enabled"  label="是否启用"  width="130" align="center">
                                       <template slot-scope="scope">
                                               <el-tag v-if="scope.row.enabled" type="success"
                            align="center">已启用</el-tag>
                                               <el-tag v-else type="danger">未启用</el-tag>
                                           </template>
                                   </el-table-column>
                               <el-table-column    label="操作" width="150" align="center">
                                       <template slot-scope="scope">
                                               <el-button size="small" @click="showEditView(scope.row)">编辑</el-button>
                                               <el-button size="small" type="danger"
                            @click="deleteHandler(scope.row)">删除</el-button>
                                           </template>
                                   </el-table-column>
                           </el-table>
                       
                   </div>
               <el-dialog  title="编辑职称" :visible.sync="dialogVisible"  width="30%">
                       <div> 
                <el-form :model="updateJl" :rules="rules" ref="updateJl" label-width="30%" class="demo-ruleForm">
                    <el-form-item label="职称名称" prop="name">
                        <el-input v-model="updateJl.name" style="width: 205px;" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="职称等级" prop="titleLevel">
                        <el-select v-model="updateJl.titleLevel" placeholder="请选择职称等级" size="small">
                            <el-option  v-for="item in titleLevels" :key="item" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否启用" prop="enabled">
                        <el-switch v-model="updateJl.enabled" active-color="#13ce66" inactive-color="#ff4949"
                            active-text="启用" inactive-text="禁用" style="margin-top: 10px;margin-left: 10px;"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="margin-left: 70px;" size="small" @click="dialogVisible = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="doUpdate('updateJl')">确 定</el-button>
                    </el-form-item>
                </el-form>     
            </div>
                   </el-dialog>
           
    </div>
</template>

<script>
export default {
    name: "JoblevelMana",
    data() {
        return {
            jl: {
                name: '',
                titleLevel: ''
            },
            updateJl: {
                name: '',
                titleLevel: '',
                enabled: false
            },
            dialogVisible: false,
            jls: [],
            multipleSelection: [],
            titleLevels: [
                '正高级',
                '副高级',
                '中级',
                '初级',
                '员级',
            ],
            rules: {
                name: [
                    { required: true, message: '请输入职称', trigger: 'blur' },
                ],
            }
        }
    }, mounted() {
        this.initJls();
    },
    methods: {
        deleteMany() {
            this.$confirm('此操作将永久删除选中的 "' + this.multipleSelection.length + '"条 职称, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = '?';
                this.multipleSelection.forEach(item => {
                    ids += 'ids=' + item.id + '&';
                })
                this.deleteRequest('/system/basic/joblevel/' +ids).then(resp => {
                        if (resp) {
                            this.initJls();
                        }
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        doUpdate(updateJl) {
            this.$refs[updateJl].validate((valid) => {
                if (valid) {
                    this.putRequest('/system/basic/joblevel/', this.updateJl).then(resp => {
                        if (resp) {
                            this.initJls();
                            this.dialogVisible = false;
                        }
                    })
                }
            });
        },
        showEditView(data) {
            Object.assign(this.updateJl, data);
            this.updateJl.createDate = '';
            this.dialogVisible = true;
        },
        deleteHandler(data) {
            this.$confirm('此操作将永久删除 "' + data.name + '" 职称, 是否继续?', '是否继续?',
                '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/system/basic/joblevel/' +
                    data.id).then(resp => {
                        if (resp) {
                            this.initJls();
                        }
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        addJobLevel() {
            if (this.jl.name) {
                if (this.jl.titleLevel) {
                    this.postRequest('/system/basic/joblevel/',
                        this.jl).then(resp => {
                            if (resp) {
                                this.initJls();
                            }
                        })
                } else {
                    this.$message.warning("请选择一项职称等级！");
                }
            } else {
                this.$message.warning("职称名称不能为空！");
            }
        },
        initJls() {
            this.getRequest('/system/basic/joblevel/').then(resp => {
                if (resp) {
                    this.jls = resp;
                    this.jl = {
                        name: '',
                        titleLevel: ''
                    }
                }
            })
        }
    }
}


</script>


<style>

</style>